<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form ref="formValidate" v-loading="fullscreenLoading" class="formValidate mt20" :rules="ruleValidate"
        :model="formValidate" label-width="120px" @submit.native.prevent>
        <el-form-item label="标题：" prop="title">
          <el-input v-model="formValidate.title" maxlength="250" placeholder="请输入标题" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" :loading="loading" @click="saveAction()"
            v-hasPermi="['admin:bargain:update']">保存</el-button>
          <el-button @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import {
    bargainSaveApi,
    bargainInfoApi,
    bargainUpdateApi,
  } from "@/api/marketing";
  export default {
    data() {
      return {
        pickerOptions: this.$timeOptions,
        listLoadingPink: false,
        dialogVisible: false,
        fullscreenLoading: false,
        loading: false,
        formValidate: {
          title: "",
          videoUrl: "",
          startDate: "",
          compDate: "",
          //题库中选中的题目
          artList: [],
        },
        videoUrl: "",
        categoryTreeData: [],
        ruleValidate: {
          title: [{
            required: true,
            message: "请输入日日练标题",
            trigger: "blur",
          }, ],
          startDate: [{
            required: true,
            message: "开始日期不为空",
            trigger: "blur",
          }, ],
          compDate: [{
            required: true,
            message: "结束时间不为空",
            trigger: "blur",
          }, ],
        },
        timeVal: "",
      };
    },

    mounted() {
      if (this.$route.params.id) {
        this.getInfo();
      }
    },
    methods: {
      //获取信息
      getInfo() {
        bargainInfoApi({
          id: this.$route.params.id
        }).then((res) => {
          this.formValidate = res;
        });
      },

      saveAction() {
        if (this.$route.params.id) {
          this.handerUpdate();
        } else {
          this.handlerSave();
        }
      },
      back(){
            this.$router.push({
              path: "/zou/daySortList"
            });
      },
      //保存接口
      handlerSave() {
        this.loading = true;
        bargainSaveApi(this.formValidate)
          .then((res) => {
            this.$message.success("编辑成功");
            this.loading = false;
            this.$router.push({
              path: "/zou/daySortList"
            });
          })
          .catch(() => {
            this.loading = false;
          });
      },

      //保存提交后台
      handerUpdate() {
        this.loading = true;
        bargainUpdateApi(this.formValidate)
          .then((res) => {
            this.$message.success("编辑成功");
            this.loading = false;
            this.$router.push({
              path: "/zou/daySortList"
            });
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
  };
</script>

<style lang="scss">
  .row_style {
    margin-top: 5px;
  }

  .title_style {
    padding: 0 30px;
  }

  .iview-video-style {
    width: 300px;
    height: 180px;
    border-radius: 10px;
    background-color: #707070;
    margin: 0 120px 20px;
    position: relative;
    overflow: hidden;
  }

  .iview-video-style .iconv {
    color: #fff;
    line-height: 180px;
    width: 50px;
    height: 50px;
    display: inherit;
    font-size: 26px;
    position: absolute;
    top: -74px;
    left: 50%;
    margin-left: -25px;
  }

  .iview-video-style .mark {
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }
</style>